<!-- wyf 2022-5-11 -->
<template>
  <z-form-item
    v-if="basicForm?.isShow == '1'"
    :label-col="{ style: { width: '120px', paddingRight: '6px' } }"
    :required="formForm?.required === '1'"
    :prop="basicForm.field"
    :label="
      formForm?.headText && formForm.personal == '1'
        ? formForm?.headText
        : basicForm?.titleName || '单选框'
    "
    class="z-form-item"
  >
    <z-radio-group
      v-model:value="model[basicForm.field]"
      :value="formForm.value"
      :options="addOption"
      :disabled="formForm?.disabled === '1'"
      @change="selectChange"
    />
  </z-form-item>
</template>
<script>
import { computed, defineComponent, toRef, onMounted, watch, ref } from 'vue'
import formInfo from '../../../api/renderForm/index.js'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'RadioItem',
  props: {
    formProperty: {
      type: Object,
      default: undefined
    },
    basicProperty: {
      type: Object,
      default: undefined
    },
    formModel: {
      type: Object,
      default: undefined
    },
    formList: {
      type: Array,
      default: undefined
    }
  },
  setup(props, context) {
    const store = useStore()

    const basicForm = toRef(props, 'basicProperty')
    const formForm = toRef(props, 'formProperty')
    const formList = toRef(props, 'formList')
    const model = computed(() => (props.formModel ? props.formModel : {}))

    // 选项数据数组
    let addOption = ref([])

    // 获取选项数据  远端数据 or 静态数据
    const getDataArr = () => {
      if (formForm.value.optionType === '1') {
        addOption.value = formForm.value.addOption
      } else {
        addOption.value = []
        if (formForm.value.url) {
          formInfo.getRemoteData(formForm.value.url).then((res) => {
            if (res.code === 1) {
              addOption.value = res.data.map(item => {
                return {
                  label: item[formForm.value.label],
                  value: item[formForm.value.remoteValue],
                  disabled: false,
                  ...item
                }
              })
            } else {
              addOption.value = []
            }
          }).catch(
            addOption.value = []
          )
        }
      }
    }

    // 监听  远端数据 or 静态数据
    watch(
      () => formForm.value.optionType,
      (count, prevCount) => {
        getDataArr()
      }
    )

    onMounted(() => {
      getDataArr()
    })

    // 监听当前选择组件对象数据 赋值操作
    watch(
      () => store.getters.currentVal,
      (val) => {
        let arr = store.getters.relaFieldsArr
        arr.forEach((item) => {
          if (item.assoField === basicForm.value.field) {
            model.value[basicForm.value.field] = ''
            formInfo.getRemoteData(item.url + store.getters.currentVal.map(i => {
              return i[item.linkField]
            })).then((res) => {
              if (res.code === 1) {
                addOption.value = res.data.map(item1 => {
                  return {
                    label: item1[item['showField']],
                    value: item1[item['replaceField']],
                    disabled: false,
                    ...item1
                  }
                })
              } else {
                addOption.value = []
                model.value[basicForm.value.field] = ''
              }
            }).catch(() => {
              addOption.value = []
              model.value[basicForm.value.field] = ''
            })
          }
        })
      }
    )

    // 选项切换事件
    const selectChange = (val, option) => {
      addOption.value.forEach(i => {
        if (i.value === val.target.value) {
          option = [i]
        }
      })
      store.commit('formMake/UPDATE_CURRENTVAL', option)
      store.commit('formMake/UPDATE_CURRENTFIELD', basicForm.value.field)
      formList.value.forEach(item => {
        if (basicForm.value.field === item.basicProperty.field) {
          store.commit('formMake/UPDATE_ISCHANGEVAL', true)
          store.commit('formMake/UPDATE_CURRENTOBJ', item)
          store.commit('formMake/UPDATE_RELAFIELDSARR', item.formProperty.relaFields)
        }
      })
    }

    return {
      basicForm,
      formForm,
      model,
      addOption,
      selectChange
    }
  }
})
</script>
<style lang="less" scoped>
.z-form-item {
  flex: 1;
}
</style>
